<template>
	<view class="container">
		<view class="sidebar">
			<view v-for="(item, index) in navItems" :key="index"
				:class="['nav-item', { active: activeIndex === index }]" @click="handleNavClick(index, item.path)">
				{{ item.name }}
			</view>
		</view>
		<view class='content'>
			<view class="search-bar">
				<select v-model="searchType">
					<option value="id">药品ID</option>
					<option value="name">药品名称</option>
				</select>
				<input type="text" v-model="searchText" placeholder="请输入搜索内容">
				<button @click="searchDrugs">搜索</button>
			</view>
			<view class="table">
				<view class="table-header">
					<view class="table-cell">药品ID</view>
					<view class="table-cell">药品名称</view>
					<view class="table-cell">规格</view>
					<view class="table-cell">库存</view>
					<view class="table-cell">单价</view>
					<view class="table-cell">操作</view>
				</view>
				<view class="table-row" v-for="(item, index) in paginatedDrugs" :key="index">
					<view class="table-cell">{{ item.id }}</view>
					<view class="table-cell">{{ item.name }}</view>
					<view class="table-cell">{{ item.specification }}</view>
					<view class="table-cell">{{ item.stock }}</view>
					<view class="table-cell">{{ item.price }}</view>
					<view class="table-cell action-buttons">
						<button @click="replenishDrug(item)">补货</button>
						<button class="clear-button" @click="clearDrug(item)">清除</button>
					</view>
				</view>
			</view>
			<view class="pagination">
				<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
				<span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
				<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drugs: [],
				searchType: 'id',
				searchText: '',
				filteredDrugs: [],
				currentPage: 1,
				pageSize: 8,
				// 导航栏项
				navItems: [{
						name: '处方管理',
						path: '/pages/Prescription/Prescription'
					},
					{
						name: '药品管理',
						path: '/pages/drugManagement/drugManagement'
					},
					{
						name: '收费管理',
						path: '/pages/Cachier/Cachier'
					},
					{
						name: '退费管理',
						path: '/pages/Cachier/Refund'
					}
				],
				// 当前激活的导航项索引
				activeIndex: 1,
				//链接相关
				baseUrl:"http://172.22.224.1:8080"
			}
		},
		computed: {
			totalPages() {
				return Math.ceil(this.filteredDrugs.length / this.pageSize);
			},
			paginatedDrugs() {
				const start = (this.currentPage - 1) * this.pageSize;
				const end = start + this.pageSize;
				return this.filteredDrugs.slice(start, end);
			}
		},
		mounted() {
			this.fetchDrugs();
			this.filteredDrugs = this.drugs;
		},
		methods: {
			fetchDrugs() {
				uni.request({
					url: this.baseUrl+'/drugManagement/getAllDrugs', // 接口地址
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							this.drugs = res.data.drugs; 
							this.filteredDrugs = this.drugs;
						} else {
							console.error('获取药品数据失败:', res.data);
						}
					},
					fail: (error) => {
						console.error('请求失败:', error);
					}
				});
			},

			replenishDrug(drug) {
				uni.request({
					url: this.baseUrl+'/drugManagement/addStock', // 接口地址
					method: 'POST',
					data: {
						id: drug.id // 传入药品 ID
					},
					success: (res) => {
						if (res.statusCode === 200) {
							drug.stock += 1; // 增加库存
							uni.showToast({
								title: '补货成功',
								icon: 'success'
							});
						} else {
							console.error('补货失败:', res.data.message);
							uni.showToast({
								title: '补货失败',
								icon: 'none'
							});
						}
					},
					fail: (error) => {
						console.error('请求失败:', error);
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			clearDrug(drug) {
				uni.request({
					url: this.baseUrl+'/drugManagement/clearStock', // 接口地址
					method: 'POST',
					data: {
						id: drug.id // 传入药品 ID
					},
					success: (res) => {
						if (res.statusCode === 200) {
							drug.stock = 0; // 清除库存
							uni.showToast({
								title: '清除成功',
								icon: 'success'
							});
						} else {
							console.error('清除失败:', res.data.message);
							uni.showToast({
								title: '清除失败',
								icon: 'none'
							});
						}
					},
					fail: (error) => {
						console.error('请求失败:', error);
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			searchDrugs() {
				if (this.searchType === 'id') {
					this.filteredDrugs = this.drugs.filter(drug => String(drug.id).includes(this.searchText));
				} else if (this.searchType === 'name') {
					this.filteredDrugs = this.drugs.filter(drug => String(drug.name).includes(this.searchText));
				}
				this.currentPage = 1; // Reset to first page after search
			},
			nextPage() {
				if (this.currentPage < this.totalPages) {
					this.currentPage++;
				}
			},
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			// 处理导航项点击事件
			handleNavClick(index, path) {
				this.activeIndex = index;
				// 跳转到对应页面
				uni.redirectTo({
					url: path
				});
			}

		}
	}
</script>

<style>
	.container {
		display: flex;
		height: 100vh;
	}

	.sidebar {
		width: 200px;
		background-color: #f0f0f0;
		padding: 20px;
	}

	.nav-item {
		padding: 10px;
		margin-bottom: 10px;
		cursor: pointer;
		border-radius: 5px;
		transition: background-color 0.3s;
	}

	.nav-item.active {
		background-color: #007aff;
		color: white;
	}

	.nav-item:hover {
		background-color: #e0e0e0;
	}

	.content {
		flex: 1;
		padding: 20px;
		background-color: #fff;
	}

	.search-bar {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.search-bar select {
		margin-right: 10px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.search-bar input {
		margin-right: 10px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
		height: 60px;
		flex: 1;
	}

	.search-bar button {
		background-color: #4CAF50;
		color: white;
		border: none;
		padding: 5px 10px;
		cursor: pointer;
		border-radius: 4px;
		height: 60px;
		margin-left: auto;
	}

	.search-bar button:hover {
		background-color: #45a049;
	}

	.table {
		width: 100%;
		border-collapse: collapse;
	}

	.table-header {
		display: flex;
		background-color: #f2f2f2;
	}

	.table-cell {
		flex: 1;
		padding: 8px;
		text-align: left;
		border: 1px solid #ddd;
	}

	.table-row {
		display: flex;
	}

	.table-row:nth-child(even) {
		background-color: #f9f9f9;
	}

	.table-row:hover {
		background-color: #f1f1f1;
	}

	.action-buttons {
		display: flex;
		justify-content: center;
	}

	.action-buttons button {
		margin: 0 5px;
		padding: 5px 10px;
		border: none;
		background-color: #4CAF50;
		color: white;
		cursor: pointer;
	}

	.action-buttons button:hover {
		background-color: #45a049;
	}

	.clear-button {
		background-color: red !important;
	}

	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.pagination button {
		margin: 0 5px;
		padding: 5px 10px;
		border: none;
		background-color: #4CAF50;
		color: white;
		cursor: pointer;
		border-radius: 4px;
	}

	.pagination button:hover {
		background-color: #45a049;
	}

	.pagination button:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
</style>